<template>
    <div class="login">
        <div class="header">
            <a href="javascript:void(0)" @click="back()"><img src="../assets/images/retreat.png" alt=""/></a>
            <span>快捷支付-登陆</span>
        </div>
        <div id="gw-user">
            <div><img src="../assets/images/logo.png" alt=""/></div>
            <div class="form-label">
                <span>登录名</span>
                <input type="text" placeholder="请输入盖网号/区号+手机号"  v-model="mobile" v-verify="mobile" v-verify.mobile="mobile" />
                <div class="help-block"  v-remind="mobile"></div>
            </div>
            <div class="form-label">
                <span>密&nbsp;码</span>
                <input type="password" placeholder="请输入密码" v-model="password" v-verify="password" />
                <div class="help-block" v-remind="password"></div>
            </div>
        </div>
        <button id="submit" @click="login">登陆</button>

        <loading v-show="showLoading"></loading>
    </div>
</template>

<script>
import Vue from 'vue'
import loading from './Loading'
import 'vue-layer-mobile/need/layer.css'
import layer from 'vue-layer-mobile'
Vue.use(layer) 
export default {
  name: 'login',
  components:{
      loading,
  },
  data () {
    return {
        showLoading: false,
        mobile: '',
        password: '',
        salesOutletInfo:{},
        clientSource: 1, //设备系统类型 ，1=》网站
        rsaLogin: ''    //加密后的登陆信息
    }
  },
  watch: {
    mobile: function (newMobile, oldMobile) {
      this.mobile = this.mobile.toUpperCase() //统一大写GW号
    }
  },
  mounted () {
      this.salesOutletInfo = this.$route.query
      //this.checkLogin()
  },
  methods: {
    login(){
        if(!this.mobile||!this.password){
            this.$layer.open({
                content: '登录名和密码不得为空',
                skin: 'msg',
                time: 2000
            })
            return false
        }
        let loginForm = ''
        if(this.mobile.indexOf("GW")<0){
            // 登录名为手机号
            loginForm = '1\t' + this.mobile + '\t' + this.password + '\t'
        }else{
            // 登陆名用的GW号
            loginForm = '0\t' + this.mobile + '\t' + this.password + '\t'
        }

        //加密
        let publicKey = this.$route.query.publicKey
        /* if(publicKey.length>0){
            let jse = new this.$jsEncrypt.JSEncrypt()
            jse.setPublicKey(publicKey);
            this.rsaLogin =  '1\t' + this.mobile + '\t' + this.password + '\t';
            this.rsaLogin = jse.encrypt(this.rsaLogin,publicKey);
            //清空密码
            this.password = '';
        }
        const loginInfo = {
            deviceIdentity: navigator.userAgent,
            clientSource: 1,
            mobile: this.mobile,
            password: this.password,
            rsaLogin: this.rsaLogin
        } */
        if(publicKey.length>0){
            let jse = new this.$jsEncrypt.JSEncrypt()
            jse.setPublicKey(publicKey);
            this.rsaLogin = jse.encrypt(loginForm,publicKey);
            //清空密码
            this.password = '';
        }
        const loginInfo = {
            deviceIdentity: navigator.userAgent,
            clientSource: 1,
            loginForm: loginForm,
            rsaLogin: this.rsaLogin
        }
        this.$http.post('/api/login',loginInfo).then(res=>{
            if(res.data == '1000'){
                this.$layer.open({
                    content: '登陆成功',
                    skin: 'msg',
                    time: 100
                })
                //跳转到商家订单页
                setTimeout(()=>{
                    this.$router.push({ path: '/order', query: this.salesOutletInfo})
                },100)
            }else{
                this.$layer.open({
                    content: res.data.description,
                    skin: 'msg',
                    time: 2000
                })
            }
        },res=>{
            console.log("登陆接口异常稍后重试");
        })
        return true
    },
    checkLogin(){
        this.$http.post('/api/login').then(res=>{
            if(res.data == '1000'){
                //跳转到商家订单页
                this.$router.push({ path: '/order', query: this.salesOutletInfo});
            }else{
                console.log("自动登陆失败");
            }
        },res=>{
            console.log("登陆接口异常稍后重试");
        })
        return true
    },
    back(){
        this.$router.back()
    }
  },
  verify: {
    mobile: ["required"],
    password: ["required"]
  },
}
</script>

<style scoped>
body {background-color:#fff !important;}
/*表单样式*/
#gw-user{width:80%;min-height: 2.6667rem;margin:0 auto;margin-top:2.6rem;background: #E2F8F9;text-align: center;}
#gw-user div>img{width:1.84rem;height:1.92rem;position: relative;top:-0.96rem;}
#gw-user p{margin-bottom:1.2rem;font-size: 0.4267rem;}
.form-label{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;background:#52BEB3;border-top:1px solid #A7E7E1;text-align:left;font-size: 0.4rem;}
.form-label span{display:inline-block;width:22%;padding-left:0.2667rem;font-family: serif;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;line-height: 1.3333rem;}
.form-label input{height:0.8rem;width:70%;background:#52BEB3;padding:0;box-sizing: border-box;}
.help-block{color:#FF3E32;text-align: left;padding-left:0.2667rem;padding-bottom:0.0667rem;}
.prompt{display:none;position: absolute; top:50%;left:50%; padding:0.2667rem 0.48rem;background:#fff;  -webkit-border-radius: 0.1333rem;  -moz-border-radius: 0.1333rem;  border-radius: 0.1333rem; -webkit-transform: translate(-50%,-50%);  -moz-transform: translate(-50%,-50%);  -ms-transform: translate(-50%,-50%);  -o-transform: translate(-50%,-50%);  transform: translate(-50%,-50%);  }
.form-label button{float: right;width:34%;height:1.32rem;background:#298A80;color:#fff;}
#gw-user >p:last-child{font-size: 0.32rem;white-space: nowrap;line-height:1.3333rem;padding:0 0.1333rem;overflow: hidden;}
#submit{display:block;width:80%;height:1.2rem;color:#fff;background:#52BEB3;margin:50px auto;}
</style>